<template>
  <div>
    <div class="app-container clearfix pageHeader">
      <div class="header fl">{{$route.meta.title}}</div>
    </div>
    <div
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
      class="app-container margin-content padding-content"
      style="overflow-y: auto;">

      <div class="graph-wrapper clearfix">
        <div class="area-content fl">
          <el-form
            :model="dataForm"
            ref="dataForm">
            <el-form-item label="港口" prop="portId">
              <el-select v-model="dataForm.portId" clearable placeholder="请选择" style="width: 300px;">
                <el-option key="26" label="三山港" value="26"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <ul>
            <li
              class="item"
              v-for="(item, index) in list"
              ref="areaList"
              @click="_detailByArea(item, index)"
              @mouseover="handleOver(index)"
              @mouseout="handleOut(index)">
              <div class="clearfix">
                <span class="tit fl">{{item.areaCode}}区</span>
                <span class="text fr">{{item.usedNum}}/{{item.storeNum}}</span>
              </div>
              <span class="text fl">{{item.storeType | storeType}}<divider type="vertical"></divider>{{item.ieFlag | ieFlagFilter}}</span>
            </li>
          </ul>
        </div>

        <div class="graph fl" :class="map">
          <el-popover
            ref="popover"
            placement="right"
            width="auto"
            trigger="hover"
            v-for="(item, index) in list" :key="index">

            <div class="graph-item">
              <span class="tit">{{item.areaCode}}区({{item.storeType | storeType}})</span>
              <div class="clearfix">
                <span class="text fl">{{item.ieFlag | ieFlagFilter}}</span>
                <span class="text fr">{{item.usedNum}}/{{item.storeNum}}</span>
              </div>
            </div>
            <div
              class="item"
              :class="item.areaCode"
              slot="reference"
              ref="graphList"
              @click="_detailByArea(item, index)"
              @mouseover="handleOver(index)"
              @mouseout="handleOut(index)">{{item.areaCode}}区
            </div>
          </el-popover>
        </div>

      </div>
    </div>
    <!-- 弹窗, 最新动态 -->
    <cont-dialog v-if="visible" ref="contDialog"></cont-dialog>
  </div>
</template>

<script>
  // api
  import { detailByPortId, detailByArea } from '@/api/storageYard'
  import { getPortTree } from '@/api/port'
  // utils
  import { modifyObj } from '@/utils/tools'
  import { addClass, removeClass, hasClassName } from '@/utils/dom'
  import { mapFilter } from '@/utils'
  // vuex
  import { mapMutations, mapGetters } from 'vuex'
  // components
  import ContDialog from '@/components/ContDialog'
  import Divider from '@/components/Divider'
  import Treeselect from '@riophae/vue-treeselect'

  export default {
    name: 'el-graph',
    data() {
      return {
        loading: false,
        dataForm: {
          portId: '26'
        },
        list: [],
        visible: false
      }
    },
    computed: {
      map() {
        return `cont_map_sanshangang_mt`
      },
      ...mapGetters([
        'account'
      ])
    },
    created() {
      this._detailByPortId()
    },
    methods: {
      _detailByPortId() {
        this.loading = true
        detailByPortId(this.dataForm).then((res) => {
          if (res.data.data) {
            this.list = res.data.data
          } else {
            this.list = []
          }
          this.loading = false
        })
      },
      _detailByArea(item, index) {
        this.visible = true
        this.$nextTick(() => {
          this.setCurrentId(item.areaCode)
          this.$refs['contDialog'].init()
        })
      },
      handleOver(index) {
        addClass(this.$refs.graphList[index], 'active')
        addClass(this.$refs.areaList[index], 'active')
        this.$refs.popover[index].showPopper = true
      },
      handleOut(index) {
        removeClass(this.$refs.graphList[index], 'active')
        removeClass(this.$refs.areaList[index], 'active')
        this.$refs.popover[index].showPopper = false
      },
      ...mapMutations({
        setCurrentId: 'SET_CURRENTID',
      })
    },
    components: {
      ContDialog,
      Divider,
      Treeselect
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" rel="stylesheet/scss" type="text/scss">
  .graph-wrapper {
    display: flex;
    /*min-width: 1370px;*/
    background-color: #fff;

    ul {
      padding: 0;
      margin: 0;
      list-style: none;
    }
  }

  .area-content {
    flex: 0 0 310px;
    width: 310px;
    overflow: hidden;
    font-size: 12px;

    .item {
      color: #999;
      min-width: 95px;
      border: 1px solid #ebeef5;
      border-radius: 4px;
      background-color: #fff;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
      padding: 8px;
      display: inline-block;
      cursor: pointer;
      transition: all .3s;

      &.active,
      &:hover {
        background-color: #2db7f5;
        color: #fff;
        .tit {
          color: #fff;
        }
      }
      span {
        display: block;
      }
      .tit {
        color: #333;
        font-weight: 400;
      }

      &:first-child {
        margin-right: 8px;
        margin-bottom: 8px;
      }

      & + .item {
        margin-right: 8px;
        margin-bottom: 8px;
      }
    }

    .no-data {
      width: 300px;
      padding: 24px 24px 1000px;
      margin-bottom: -1000px;
      background-color: #ccc;
      text-align: center;
      color: #666;
    }
  }

  .graph {
    flex: none;
    margin-top: 32px;
    position: relative;
    width: 1000px;
    background-color: #fff;
    background-repeat: no-repeat;
    background-size: cover;

    &.no-data {
      flex: 1;
      height: 680px;
      background-color: #ccc;
      text-align: center;
      color: #666;
    }

    .el-icon-picture-outline {
      font-size: 100px;
      line-height: 680px;
    }

    .graph-item {
      font-size: 12px;
      .tit {
        color: #333;
        font-weight: 400;
      }
      .text {
        color: #999;
      }
    }

    .item {
      transition: all .3s;
      &.active,
      &:hover {
        background-color: #2db7f5;
        color: #fff;
        .tit {
          color: #fff;
        }
      }
    }
  }

  .cont_map_rongqi_mt {
    height: 683px;
    background-image: url(../../img/cont_map_rongqi_mt.jpg);

    .NO, .F6, .F5, .F4, .F3, .F2, .F1, .F7, .A5, .A6, .A2, .A4, .A1, .A3, .T1, .B5, .B2, .B1, .B4, .B7, .B3, .B6, .B8, .T2, .T3, .T4, .T5, .T9, .T10, .T6, .H1, .H2, .H3 {
      position: absolute;
      background-color: #008000;
      font-size: 12px;
      text-align: center;
      cursor: pointer;
      color: #fff;
    }

    .NO {
      width: 41px;
      height: 54px;
      left: 49px;
      top: 215px;
    }

    .F6 {
      width: 59px;
      height: 24px;
      left: 190px;
      top: 174px;
    }

    .F5 {
      width: 41px;
      height: 20px;
      left: 312px;
      top: 166px;
    }

    .F4 {
      width: 15px;
      height: 23px;
      left: 474px;
      top: 157px;
    }

    .F3 {
      width: 40px;
      height: 20px;
      left: 561px;
      top: 147px;
    }

    .F2 {
      width: 41px;
      height: 19px;
      left: 705px;
      top: 147px;
    }

    .F1 {
      width: 31px;
      height: 17px;
      left: 840px;
      top: 156px;
    }

    .F7 {
      width: 104px;
      height: 18px;
      left: 193px;
      top: 272px;
    }

    .A5 {
      width: 122px;
      height: 50px;
      left: 344px;
      top: 282px;
    }

    .A6 {
      width: 112px;
      height: 40px;
      left: 348px;
      top: 349px;
    }

    .A2 {
      width: 205px;
      height: 37px;
      left: 491px;
      top: 278px;
    }

    .A4 {
      width: 204px;
      height: 38px;
      left: 492px;
      top: 348px;
    }

    .A1 {
      width: 186px;
      height: 38px;
      left: 715px;
      top: 278px;
    }

    .A3 {
      width: 183px;
      height: 39px;
      left: 717px;
      top: 348px;
    }

    .T1 {
      width: 11px;
      height: 28px;
      left: 327px;
      top: 467px;
    }

    .B5 {
      width: 46px;
      height: 42px;
      left: 389px;
      top: 423px;
    }

    .B2 {
      width: 39px;
      height: 142px;
      left: 502px;
      top: 425px;
    }

    .B1 {
      width: 33px;
      height: 141px;
      left: 550px;
      top: 426px;
    }

    .B4 {
      width: 111px;
      height: 75px;
      left: 191px;
      top: 495px;
    }

    .B7 {
      width: 48px;
      height: 80px;
      left: 442px;
      top: 544px;
    }

    .B3 {
      width: 95px;
      height: 26px;
      left: 522px;
      top: 615px;
    }

    .B6 {
      width: 48px;
      height: 34px;
      left: 375px;
      top: 607px;
    }

    .B8 {
      width: 18px;
      height: 27px;
      left: 784px;
      top: 436px;
    }

    .T2 {
      width: 21px;
      height: 24px;
      left: 300px;
      top: 300px;
    }

    .T3 {
      width: 21px;
      height: 26px;
      left: 300px;
      top: 341px;
    }

    .T4 {
      width: 21px;
      height: 37px;
      left: 300px;
      top: 385px;
    }

    .T5 {
      width: 45px;
      height: 20px;
      left: 341px;
      top: 445px;
    }

    .T9 {
      width: 45px;
      height: 16px;
      left: 214px;
      top: 421px;
    }

    .T10 {
      width: 42px;
      height: 17px;
      left: 258px;
      top: 421px;
    }

    .T6 {
      width: 12px;
      height: 26px;
      left: 326px;
      top: 494px;
    }

    .H1 {
      width: 49px;
      height: 12px;
      left: 651px;
      top: 420px;
    }

    .H2 {
      width: 56px;
      height: 13px;
      left: 727px;
      top: 420px;
    }

    .H3 {
      width: 10px;
      height: 29px;
      left: 716px;
      top: 463px;
    }
  }

  .cont_map_sanshangang_mt {
    height: 729px;
    background-image: url(../../img/cont_map_sanshangang_mt.jpg);

    .F1, .H1, .F2, .H2, .F3, .H3, .F4, .H4, .F5, .H5, .D1, .D2, .D3, .D4, .D5, .D6, .B0, .A0 {
      position: absolute;
      background-color: #008000;
      font-size: 12px;
      text-align: center;
      cursor: pointer;
      color: #fff;
    }
    .F1 {
      width: 148px;
      height: 21px;
      left: 277px;
      top: 253px;
    }
    .H1 {
      width: 215px;
      height: 20px;
      left: 438px;
      top: 254px;
    }
    .F2 {
      width: 150px;
      height: 20px;
      left: 277px;
      top: 276px;
    }
    .H2 {
      width: 215px;
      height: 20px;
      left: 438px;
      top: 276px;
    }
    .F3 {
      width: 149px;
      height: 22px;
      left: 278px;
      top: 298px;
    }
    .H3 {
      width: 216px;
      height: 21px;
      left: 437px;
      top: 298px;
    }
    .F4 {
      width: 148px;
      height: 21px;
      left: 278px;
      top: 320px;
    }
    .H4 {
      width: 184px;
      height: 21px;
      left: 438px;
      top: 320px;
    }
    .F5 {
      width: 149px;
      height: 22px;
      left: 277px;
      top: 343px;
    }
    .H5 {
      width: 184px;
      height: 19px;
      left: 438px;
      top: 346px;
    }
    .D1 {
      width: 109px;
      height: 21px;
      left: 666px;
      top: 253px;
    }
    .D2 {
      width: 111px;
      height: 21px;
      left: 665px;
      top: 275px;
    }
    .D3 {
      width: 110px;
      height: 19px;
      left: 666px;
      top: 300px;
    }
    .D4 {
      width: 111px;
      height: 20px;
      left: 665px;
      top: 320px;
    }
    .D5 {
      width: 109px;
      height: 21px;
      left: 666px;
      top: 344px;
    }
    .D6 {
      width: 110px;
      height: 21px;
      left: 666px;
      top: 371px;
    }
    .B0 {
      width: 35px;
      height: 132px;
      left: 809px;
      top: 254px;
    }
    .A0 {
      width: 28px;
      height: 38px;
      left: 853px;
      top: 253px;
    }

  }


</style>
